body {
  width: 100vw;
  height: 100vh;
  display: grid;
  perspective: 900px;
  background-color: #2c3e50;
}
main {
  width: 400px;
  height: 200px;
  border: solid 1px #ddd;
  align-self: center;
  justify-self: center;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center -100px;
  transform: rotateY(0deg);
  transition-duration: 2s;
  animation-name: slide-rotate;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-timing-function: linear;
  //   animation-timing-function: steps(4, end);
  @keyframes slide-rotate {
    to {
      transform: rotateY(360deg) rotateX(360deg);
    }
  }
  div {
    height: 200px;
    overflow: hidden;
    position: absolute;
    &:nth-child(2),
    &:nth-child(4) {
      width: 200px;
    }
    &:nth-child(2) {
      transform-origin: left top;
      transform: translateX(400px) rotateY(90deg);
    }
    &:nth-child(3) {
      transform: translateZ(-200px) rotateY(360deg);
    }
    &:nth-child(4) {
      transform-origin: right top;
      transform: translateX(-100%) rotateY(-90deg);
    }
    &:nth-child(5) {
      transform-origin: bottom;
      transform: translateY(-100%) rotateX(90deg);
    }
    &:nth-child(6) {
      transform-origin: top;
      transform: translateY(100%) rotateX(-90deg);
    }
  }
}
body:hover main {
  //   transform: rotateY(360deg);
}
